<template>
  <div class="designerReport">
    <div class="container">
      <div class="editorArea">
        <div class="editor-canvas">
          <div class="grid-canvas">
            <table ref="tableDom" border="1" cellspacing="0" cellpadding="0" :style="computedTableStyle">
              <colgroup>
                <col :style="{ width: item + 'px' }" v-for="(item, index) in content.colgroupWidth" :key="index" />
              </colgroup>
              <tr v-for="(item, index) in content.rows" :key="index">
                <td
                  v-for="(cItem, cIndex) in computedNotHide(item.cells)"
                  :key="cIndex"
                  :x="cItem.x"
                  :y="cItem.y"
                  :class="['tdCell']"
                  :style="computedTdStyle(cItem.style)"
                  :rowspan="cItem.merge && cItem.merge.length == 2 ? cItem.merge[0] : 1"
                  :colspan="cItem.merge && cItem.merge.length == 2 ? cItem.merge[1] : 1"
                >
                  <template v-if="cItem.type == 'text' && !cItem.isEdit">{{ cItem.value }}</template>
                  <component
                    v-else
                    :ref="cItem.x + '-' + cItem.y + '-comp'"
                    :is="formatterCompType(cItem.type)"
                    :tdStyle="computedComponentStyle(cItem.style)"
                    :x="cItem.x"
                    :y="cItem.y"
                    :disabled="true"
                    :value="cItem.value"
                    :dicData="cItem.dicData"
                  />
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import boxArea from './boxArea.vue';
import menuBtnGroups from './menuBtnGroups.vue';
import fieldList from './fieldList.vue';
import attrConfig from './attrConfig.vue';
import { mapState } from 'vuex';

import shdFormDesignText from './components/input.vue';
import shdFormDesignNumber from './components/inputNumber.vue';
import shdFormDesignRadio from './components/radio.vue';
import shdFormDesignCheckbox from './components/checkbox.vue';
import shdFormDesignSelect from './components/select.vue';
import shdFormDesignBtnAddRow from './components/btnAddRow.vue';
import shdFormDesignBtnDeleteRow from './components/btnDeleteRow.vue';
export default {
  name: 'SHDFormDesigner',
  components: {
    boxArea,
    menuBtnGroups,
    fieldList,
    attrConfig,
    'shdFormDesign-text': shdFormDesignText,
    'shdFormDesign-number': shdFormDesignNumber,
    'shdFormDesign-radio': shdFormDesignRadio,
    'shdFormDesign-checkbox': shdFormDesignCheckbox,
    'shdFormDesign-select': shdFormDesignSelect,
    'shdFormDesign-btnAddRow': shdFormDesignBtnAddRow,
    'shdFormDesign-btnDeleteRow': shdFormDesignBtnDeleteRow
  },
  props: {
    content: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    ...mapState({
      baseTableConfig: (state) => state.form.baseTableConfig
    }),
    computedTableStyle() {
      if (this.content.tableTotalWidth) {
        return {
          width: this.content.tableTotalWidth + 'px'
        };
      }
    },
    computedTdStyle(style) {
      return (style) => {
        return {
          ...style,
          'font-size': (style['font-size'] || 12) + 'px',
          height: (style.height || this.baseTableConfig.cellHeight) - 1 + 'px'
          // 'line-height': (style.height || this.baseTableConfig.cellHeight) - 1 + 'px'
        };
      };
    },
    computedComponentStyle(style) {
      return (style) => {
        return {
          width: (style.width || this.baseTableConfig.cellWidth) - 1 + 'px',
          'font-size': (style['font-size'] || 12) + 'px',
          height: (style.height || this.baseTableConfig.cellHeight) - 1 + 'px',
          'line-height': (style.height || this.baseTableConfig.cellHeight) - 1 + 'px'
        };
      };
    },
    formatterCompType(type) {
      return (type) => {
        return 'shdFormDesign-' + (type || 'text');
      };
    }
  },
  methods: {
    computedNotHide(cell) {
      return cell.filter((item) => !item.hide);
    }
  }
};
</script>
<style scoped lang="scss">
.designerReport {
  .container {
    height: 100%;
    background-color: #fff;

    .editorArea {
      width: 100%;
      height: 100%;
      .editor-canvas {
        width: 100%;
        height: 100%;
        overflow: auto;
        .grid-canvas {
          width: 100%;
          height: 100%;
          position: relative;

          table {
            table-layout: fixed;
            border-collapse: collapse;
            word-break: break-all;
            word-wrap: break-word;
            border-width: 0;
            tr {
              td {
                background-color: #fff;
                user-select: none;
                text-align: center;
                position: relative;

                ::v-deep .el-input__inner {
                  background: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
